Soru & Cevap

Slider

09.05.2019 - 11:05

Html css web sayfasında tek sayfa'da birden fazla slider nasıl eklerim

6 Görüntülenme

3 Cevap

Sitedeki sorulara cevap verebilmek için giriş yapın ya da üye olun.

Profile picture for user ridvanturkmen78
ridvanturkmen78
01.07.2019 - 03:29


<!Doctype html>
<html>
<head>
<title>JAVASCRIPT  OLAYI</title>
<style>
.cerceve{ width:700px; margin:0px auto; border:2px;}
#resim{width:696px;  height:400px;border:2px solid green; background-image:url("gins.png");
background-repeat:no-repeat;background-size:cover;}
#resim_1{width:50px;  height:100px; text-align:center; line-height:100px; border:2px solid darkblue; float:left;}
#resim_2{width:50px;  height:100px; text-align:center; line-height:100px; border:2px solid green; float:left;}
#resim_3{width:50px;  height:100px; text-align:center; line-height:100px; border:2px solid  darkblue; float:left;}
#resim_4{width:50px;  height:100px; text-align:center; line-height:100px; border:2px solid green; float:left;}
#resim_5{width:50px;  height:100px; text-align:center; line-height:100px; border:2px solid darkblue; float:left;}
</style>
</head>
<body>
<script>
function resim_1()
{ document.getElementById("resim").style.backgroundImage = 'url(gins.png)';}
function resim_2()
{ document.getElementById("resim").style.backgroundImage = 'url(org2.jpg)';}
function resim_3()
{ document.getElementById("resim").style.backgroundImage = 'url(img.jpg)';}
function resim_4()
{ document.getElementById("resim").style.backgroundImage = 'url(syn.jpg)';}
function resim_5()
{ document.getElementById("resim").style.backgroundImage = 'url(rog.jpg)';}
</script>
<div class="cerceve">
<div class="resim" id="resim"></div>
<div  id="resim_1" onmouseover ="resim_1()" >1</div>
<div  id="resim_2" onmouseover ="resim_2()" >2</div>
<div  id="resim_3" onmouseover ="resim_3()" >3</div>
<div id="resim_4" onmouseover ="resim_4()">4</div>
<div  id="resim_5" onmouseover ="resim_5()"  >5</div>
</div>
</body>
</html>
 

Profile picture for user f.ulasosm
f.ulasosm
12.05.2019 - 11:18

Slider'la ilgili kod bloğunu web sitenizin istediğiniz kısmında istediğiniz kadar kullanabilirsiniz. 


https://getbootstrap.com/docs/4.0/components/carousel/

 bootstrap'ta kullanabileceğiniz birçok örnek slider'ı bulunmakta. Bunu birden fazla kez kullanabilirsiniz.

Hasan
17.05.2019 - 12:03
Abi link'i inceledim ama çalışmadı yapamadım projeyi sana göndersem baka bilirimisin ?
Profile picture for user ufuk.cukuryurt
ufuk.cukuryurt
10.05.2019 - 01:37
Aynı slider kod bloğunu kopyalayabilirsin
Hasan
18.05.2019 - 10:50
projeyi göndersem baka bilirimisin ?